<template>
  <!-- 上方的查询表单 -->
  <div>
    <!-- {{ queryInfo }} -->
    <el-form>
      <el-form-item>
        <el-input v-model="queryInfo.tname" placeholder="分类模糊查询" />
      </el-form-item>

      <el-form-item>
        <el-button-group>
          <el-button type="primary" @click="reset"> 重置</el-button>
          <el-button type="primary" @click="requery">查询</el-button>
          <el-button type="primary" @click="showAdd" v-if="mode != 'select'">
            添加</el-button
          >
        </el-button-group>
      </el-form-item>
    </el-form>
  </div>

  <div>
    <!-- 表格 -->

    <el-table :data="list">
      <el-table-column prop="tname" label="分类名称" />
      <el-table-column v-if="mode != 'select'" prop="intro" label="分类简历" />
      <el-table-column label="操作">
        <template #default="s">
          <el-button
            v-if="mode === 'select'"
            type="primary"
            @click="infoSelected(s.row)"
            >选择</el-button
          >
          <el-button v-if="mode != 'select'" type="primary" @click="del(s.row)"
            >删除</el-button
          >
          <el-button
            v-if="mode != 'select'"
            type="primary"
            @click="showModify(s.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页-->
    <!-- <el-pagination
      v-model:current-page="page.pageNumber"
      v-model:page-size="page.pageSize"
      :total="page.total"
      @current-change="query"
    ></el-pagination> -->
    <PageComp :page="page" @info-change="query"></PageComp>
  </div>

  <!-- 添加的对话框 -->
<div>
  <el-dialog title="发布软件" v-model="avisible" @closed="requery">
    <div>
      <el-form-item label="分类名称">
        <el-input v-model="addInfo.tname"></el-input>
      </el-form-item>

      <el-form-item label="公告简历">
        <el-input v-model="addInfo.intro" :rows="10" type="textarea"></el-input>
      </el-form-item>
    </div>

    <template #footer>
      <el-button type="danger" @click="avisible = false">取消</el-button>
      <el-button type="info" @click="resetAdd">重填</el-button>
      <el-button type="success" @click="add">发布</el-button>
    </template>
  </el-dialog>

  <!-- 修改的对话框 -->
  <el-dialog title="修改软件" v-model="mvisible" @closed="requery">
    <div>
      <el-form-item label="分类信息">
        <el-input v-model="modifyInfo.tname"></el-input>
      </el-form-item>

      <el-form-item label="分类简历">
        <el-input
          v-model="modifyInfo.intro"
          :rows="10"
          type="textarea"
        ></el-input>
      </el-form-item>
    </div>

    <template #footer>
      <el-button type="danger" @click="mvisible = false">取消</el-button>

      <el-button type="success" @click="modify">保存</el-button>
    </template>
  </el-dialog>
</div>
</template>

<script setup>
import { ref } from 'vue';
import { Api } from '../script/Api';
import { Tools } from '../script/Tools';
import { ElMessageBox } from 'element-plus';

import { ElMessage, ElDialog, ElButton } from 'element-plus';
import PageComp from './PageComp.vue';

const emit = defineEmits(['info-change']);

const props = defineProps(['mode']);

const infoSelected = (info) => {
  emit('info-change', info);
};

//#region 查询

const page = ref({ pageNumber: 1, pageSize: 5 });
const list = ref([]);
const loading = ref(false);

const reset = () => {
  queryInfo.value = {
    tname: '',
  };
  query();
};

const queryInfo = ref({
  tname: '',
});

const requery = () => {
  page.value.pageNumer = 1;
  query();
};

const query = () => {
  loading.value = true;
  Api.get(
    `/crud/softwaretype/${page.value.pageSize}/${page.value.pageNumber}`,
    Tools.concatJson(page.value, queryInfo.value),
    (data) => {
      loading.value = false;
      if (data.success) {
        list.value = data.data.data;
        page.value = data.data.pageBean;
      } else {
        ElMessage.error(data.message);
      }
    }
  );
};

query();
//#endregion

//#region 添加的部分

const avisible = ref(false);

const addInfo = ref({
  tname: '',
  intro: '',
});

const resetAdd = () => {
  addInfo.value = {
    tname: '',
    intro: '',
  };
};

const showAdd = () => {
  avisible.value = true;
};

const add = () => {
  Api.post('/crud/softwaretype', addInfo.value, (data) => {
    if (data.success) {
      ElMessageBox.alert(data.message, '软件');
      resetAdd();
    } else {
      ElMessageBox.alert(data.message, '软件');
    }
  });
};

//#endregion

//#region 修改的部分
const mvisible = ref(false);
const modifyInfo = ref({});
const showModify = (info) => {
  Api.get(`/crud/softwaretype/${info.stid}`, {}, (data) => {
    if (data.success) {
      modifyInfo.value = data.data;
      mvisible.value = true;
    } else {
      ElMessageBox.alert(data.message, '软件');
    }
  });
};
const modify = () => {
  Api.put('/crud/softwaretype', modifyInfo.value, (data) => {
    if (data.success) {
      ElMessageBox.alert(data.message, '软件');
      resetAdd();
    }
  });
};

//#endregion

//#region 删除的部分

const del = (info) => {
  ElMessageBox.confirm(`是否删除：${info.tname}`, '软件')
    .then(() => {
      console.log('点击了确定');
      Api.delete(`/crud/softwaretype/ ${info.stid}`, {}, (data) => {
        if (data.success) {
          ElMessageBox.alert(data.message, '软件');
          requery();
        } else {
          ElMessageBox.alert(data.message, '软件');
        }
        requery();
      });
    })
    .catch(() => {
      console.log('点击了取消');
    });
};

//#endregion

</script>

<style scoped></style>
